<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*
			{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			a,img
			{
				border: 0;
				text-decoration: none;
				display: block;   /* block和flex的区别*/
			}
			/* body
			{
				font:12px/180% Arial,Helvetica,sancs-serif,"新宋体";
			}
			div.sdmenu
			{
				width: 150px;
				margin: 0 auto;
				font-family: Arial, sans-serif;
				font-size: 12px;
				padding-bottom: 10px;
				background: url(bottom.gif) no-repeat right bottom;
				color: #fff;
			}
			div.sdmenu div
			{
				background: url(title.gif) repeat-x;
				overflow: hidden;
			} */
			div.sdmenu div.collapsed
			{
				height:25px;
			}
		/* 	div.sdmenu div span
			{
				display: block;
				height: 15px;
				line-height: 15px;
				overflow: hidden;
				padding: 5px 25px;
				font-weight: bold;
				color: white;
				background: url(expanded.gif) no-repeat 10px center;
				cursor:pointer;
				border-bottom: 1px solid #ddd;
			} */
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
			  function getStyle(obj,name)
			  {
			  	if(window.getComputedStyle)
			  	{
			  		return getComputedStyle(obj,null)[name];
			  	}
			  	else
			  	{
			  		return obj.currentStyle[name];
			  	}
			  }
			  var timer;
			  //  objdiv speed 速度 zdian 终点 fangx 方向
			  function move(obj,speed,zdian,fangx)
			  {
			  	clearInterval(timer);
			  		var curry=parseInt(getStyle(obj,fangx));
			  		if(curry>zdian)
			  		{
			  			speed=-speed;
			  		}
			  		timer=setInterval(function()
			  		{
			  			
			  			var oldvalue=parseInt(getStyle(obj,fangx));
			  			var newvalue=oldvalue+speed;
			  			if(fangx=="left")
			  			{
			  				if((speed<0&&newvalue<zdian)||(speed>0&&zdian<newvalue))
			  				{
			  					newvalue=zdian;
			  				}
			  				obj.style.left=newvalue+"px";
			  			}
			  			if(fangx=="top")
			  			{
			  				if((speed<0&&newvalue<zdian)||(speed>0&&zdian<newvalue))
			  				{
			  					newvalue=zdian;
			  				}
			  				obj.style.top=newvalue+"px";
			  			}
			  			if(newvalue==zdian)
			  			{
			  				clearInterval(timer);
			  			}
			  			
			  		},30)
			  	
			  }	
				
				
				
				function hasClass(obj,cn)            //判断是否有cn这个class属性
				{
					var reg=new RegExp("\\b"+cn+"\\b");   //cn是什么reg就是什么
					return reg.test(obj.className);    //判断className里面是否有reg也就是是否有cn
				}
				function addClass(obj,cn)
				{
					if(!hasClass(obj,cn))
					{
						obj.className+=" "+cn;
					}
				}
				function removeClass(obj,cn)   //直接删除就好了，而不用判断是否有，有也删，无也删除
				{
					var reg=new RegExp("\\b"+cn+"\\b");    //前面为空 后面也为空
					obj.className=obj.className.replace(reg,"");
				}
				function toggleClass(obj,cn)
				{
					if(hasClass(obj,cn))
					{
						removeClass(obj,cn)
					}
					else
					{
						addClass(obj,cn);
					}
				}
				
				// 每一个菜单都是一个div 当div具有collapsed这个类时，div就是折叠的状态 当没有时，就是展开的功能
				//获取所有class为menuSpan的元素
				var menuSpan=document.querySelectorAll(".menuSpan");
				//alert("gg");
				//alert(menuSpan.length);
				var openDiv=menuSpan[0].parentNode;
				for(var i=0;i<menuSpan.length;i++)
				{
					menuSpan[i].onclick=function()
					{
						//this代表当前点击的span
						var parentDiv=this.parentNode;
						toggleMenu(parentDiv);
						if(openDiv!=parentDiv && !hasClass(openDiv,"collapsed"))
						{
							//addClass(openDiv,"collapsed");
							//为了可以统一处理动画过渡效果，我们希望将这里的addClass改为toggleClass
							//此处toggleClass()不需要有移除功能
							toggleMenu(openDiv);
						}
						openDiv=parentDiv;
					}
					function toggleMenu(obj)
					{
						var begin=obj.offsetHeight;
						toggleClass(obj,"collapsed");
						var end=obj.offsetHeight;
						 //console.log("begin="+begin+",end="+end);
						//动画效果就是将高度从begin向end过渡
						//将元素的高度重置为begin
						obj.style.height=begin+"px";
						//执行动画，从begin向end过渡
						move(obj,"height",end,1,function(){
							obj.style.height="";
						})
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">htaccess密码</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">javascript工具包</a>
				<a href="#">css驱动</a>
				<a href="#">codingforums</a>
				<a href="#">css例子</a>
			</div>
		<div class="collapsed">
			<span class="menuSpan">测试电流</span>
			<a href="#">current or not</a>
			<a href="#">current or not</a>
			<a href="#">current or not</a>
			<a href="#">current or not</a>
		</div>
		</div>
	</body>
</html>